import Link from 'next/link';
import { LaravelFullIcon } from '../components/icons/LaravelFullIcon';
import { SymfonyFullIcon } from '../components/icons/SymfonyFullIcon';
import styles from './index.module.css';
import CaseStudies from '../components/home/case-studies';
import Testimonials from '../components/home/testimonials';
import Invocations from '../components/home/invocations';
import UseCases from '../components/home/use-cases';
import Sponsors from '../components/home/sponsors';
import Intro from '../components/home/intro';
import { useData } from 'nextra/data';
import { getBrefInvocations } from '../aws/invocations';
import { NextSeo } from 'next-seo';

<NextSeo description="Bref is a framework to write and deploy serverless PHP applications on AWS Lambda." />

export async function getStaticProps() {
    let invocations;
    try {
        invocations = await getBrefInvocations();
    } catch (e) {
        console.error(e);
        // Fallback value for local development, preview environments, etc. (no permissions)
        invocations = 11700607900;
    }
    // See https://nextra.site/docs/guide/ssg
    return {
        props: {
            ssg: {
                invocations: invocations,
            },
        },
        // The page will be considered as stale and regenerated every hour
        revalidate: 60 * 60,
    };
}

<div className="relative isolate overflow-hidden bg-gradient-to-b from-blue-100/20">
    <div className="mx-auto max-w-7xl pb-24 pt-10 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:px-8 lg:py-24">
        <div className="px-6 lg:px-0 lg:pt-6">
            <div className="mx-auto max-w-2xl">
                <div className="max-w-lg">
                    <h1 className="text-4xl font-black tracking-tight text-gray-900 sm:text-5xl">
                        Simple
                        and scalable PHP with
                        <span className="text-blue-500">serverless</span>
                    </h1>
                    <div className="mt-6 text-lg leading-8 text-gray-600">
                        Simplify your infrastructure and scale with ease.
                    </div>
                    <div className="text-lg leading-8 text-gray-600">
                        Bref is an **open-source** project that helps you go serverless on AWS with PHP.
                    </div>
                    <div className="mt-10 flex items-center gap-x-6">
                        <Link href="/docs"
                              className="rounded-md bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                        >
                            Get started
                        </Link>
                        <a href="https://github.com/brefphp/bref"
                           className="text-sm font-semibold leading-6 text-gray-900">
                            View on GitHub <span aria-hidden="true">→</span>
                        </a>
                    </div>
                    <div className="mt-6 flex items-center space-x-4 text-gray-300">
                        <LaravelFullIcon className="h-6 md:h-8" />
                        <SymfonyFullIcon className="h-12 md:h-16" />
                    </div>
                </div>
            </div>
        </div>
        <div className="mt-20 sm:mt-24 md:mx-auto md:max-w-2xl lg:mx-0 lg:mt-0 lg:w-screen">
            <div
                className="absolute inset-y-0 right-1/2 -z-10 -mr-10 w-[200%] skew-x-[-30deg] bg-white shadow-xl shadow-blue-600/10 ring-1 ring-blue-50 md:-mr-20 lg:-mr-36"
                aria-hidden="true"
            />
            <div className="shadow-lg md:rounded-3xl">
                <div
                    className="bg-blue-500 [clip-path:inset(0)] md:[clip-path:inset(0_round_theme(borderRadius.3xl))]">
                    <div
                        className="absolute -inset-y-px left-1/2 -z-10 ml-10 w-[200%] skew-x-[-30deg] bg-blue-100 opacity-20 ring-1 ring-inset ring-white md:ml-20 lg:ml-36"
                        aria-hidden="true"
                    />
                    <div className="relative px-6 pt-8 sm:pt-16 md:pl-16 md:pr-0">
                        <div className="mx-auto max-w-2xl md:mx-0 md:max-w-none">
                            <div className="w-screen overflow-hidden rounded-tl-xl bg-gray-900">
                                <div className="flex bg-gray-800/40 ring-1 ring-white/5">
                                    <div className="-mb-px flex text-sm font-medium leading-6 text-gray-400">
                                        <div
                                            className="border-b border-r border-b-white/20 border-r-white/10 bg-white/5 px-4 py-2 text-gray-300">
                                            serverless.yml
                                        </div>
                                    </div>
                                </div>
                                <div className={styles.homeCode + " px-6 pb-14 pt-6"}>
                                    ```yml
                                    service: demo

                                    provider:
                                        name: aws

                                    functions:
                                        web:
                                            runtime: php-82-fpm
                                            handler: public/index.php
                                            events:
                                                - httpApi: '*'
                                    ```
                                </div>
                            </div>
                        </div>
                        <div
                            className="pointer-events-none absolute inset-0 ring-1 ring-inset ring-black/10 md:rounded-3xl"
                            aria-hidden="true"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div className="absolute inset-x-0 bottom-0 -z-10 h-24 bg-gradient-to-t from-white sm:h-32" />
</div>

<Invocations invocations={useData().invocations} />
<Intro />
<UseCases />
<Sponsors />
<Testimonials />
<CaseStudies />
